.sd-btn.sd-btn-primary
  background-color: var(--pst-color-link) !important
  color: #fff !important
  border-radius: 40px
  font-size: 14px
  font-weight: 500
  text-decoration: none
  padding: 8px 20px
  border-width: 0 !important
  letter-spacing: 0.14px

  &:hover
    background-color: color-mix(in oklab, var(--pst-color-link) 90%,transparent) !important
    text-decoration: none
  
.sd-btn.sd-btn-primary.book-a-demo
  display: flex
  align-items: center
  flex-direction: row
  padding: 3px 4px
  position: relative

  .arrow
    background-color: #fa5300
    border-radius: 50%
    display: flex
    align-items: center
    justify-content: center
    width: 42px
    height: 42px
    transition: all 0.15s ease
    transform: translateX(0)

    @media (min-width: 960px)
      width: 34px
      height: 34px

  .text
    letter-spacing: 0.01em
    line-height: 1.3
    padding: 0px 16px
    transition: all 0.15s ease
    transform: translateX(0)

  &:hover
    .arrow
      transform: translate3d(var(--cta-arrow-shift, 116.22px), 0px, 0px)
    .text
      transform: translate3d(var(--cta-text-shift, -42px), 0px, 0px)

      @media (min-width: 960px)
        transform: translate3d(var(--cta-text-shift, -34px), 0px, 0px)

.arrow 
  svg
    width: 12px
    height: 12px

.dropdown-arrow
  color: #181a1b66
  transform: rotate(-90deg)

.back-arrow
  color: #181a1b99
  transform: rotate(90deg)

.back-text
  margin-left: 10px

.btn.with-right-arrow.callout-button
  font-size: 16px
  padding: 0
  display: inline-flex
  align-items: center
  gap: 10px
  border: 0

  &:hover
    color: var(--pst-color-link)

  &:before
    content: ""
    display: inline-flex
    align-items: center
    justify-content: center
    width: 42px
    height: 42px
    flex-shrink: 0
    background-color: color-mix(in oklab, var(--pst-color-link) 25%, transparent)
    border-radius: 50%
    transition: all 0.3s ease
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")
    background-repeat: no-repeat
    background-position: center
    background-size: 16px 16px

  &:hover:before
    background-color: var(--pst-color-link)

.kapa-ai-button
  position: fixed
  bottom: 20px
  right: 20px
  z-index: 1000
  background-color: var(--pst-color-link) !important
  color: #fff !important
  border-radius: 40px
  font-size: 16px
  font-weight: 500
  text-decoration: none
  padding: 12px 20px
  border-width: 0 !important
  letter-spacing: 0.14px
  display: flex
  align-items: center
  gap: 10px

  &:hover
    background-color: color-mix(in oklab, var(--pst-color-link) 90%, transparent) !important
    text-decoration: none

  .kapa-text
    flex: 1

  .kapa-logo
    width: 20px
    height: 20px
    display: flex
    align-items: center
    justify-content: center

    img
      width: 20px
      height: 20px
      object-fit: contain

.kapa-ask-ai-button
  display: flex
  align-items: center
  gap: 8px
  width: 100%
  margin: 8px 0
  padding: 8px 16px
  background-color: $voxel-dark
  border: 1px solid rgba(33, 37, 41, 0.2)
  border-radius: $border-radius
  font-size: 14px
  font-weight: $font-weight-medium
  color: #fff
  cursor: pointer
  transition: all $transition-normal
  letter-spacing: 0.14px

  &:hover
    background-color: color-mix(in oklab, $voxel-dark 90%, transparent)
    border-color: rgba(33, 37, 41, 0.3)
    transform: translateY(-1px)
    box-shadow: 0 2px 8px rgba(33, 37, 41, 0.2)

  &:active
    background-color: color-mix(in oklab, $voxel-dark 85%, transparent)
    transform: translateY(0)

  .kapa-text
    flex: 1
    font-weight: $font-weight-medium
    color: #fff

  .kapa-logo
    width: 16px
    height: 16px
    display: flex
    align-items: center
    justify-content: center

    img
      width: 16px
      height: 16px
      object-fit: contain